<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
     <% 
String path = request.getContextPath(); 
// 获得项目完全路径（假设你的项目叫MyApp，那么获得到的地址就是 http://localhost:8080/MyApp/）: 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 
<!DOCTYPE html>
<html>
<head>
<base href=" <%=basePath%>"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="购物车详情">
<meta name="author" content="xwj">
<title>个人购物车</title>
<link rel="stylesheet" href="css/user_css/css/bootstrap.min.css" />
        <link rel="stylesheet" href="css/user_css/css/font-awesome.min.css" />
        <!-- Custom CSS -->
        <link href="public_user/style.css" rel="stylesheet"/>
        <!-- 自定义样式 -->
	<link  href="css/user_css/css/button_style/buttonStyle.css" rel="stylesheet">
</head>
<body>
<!--header start-->
     <%@include file="header.jsp"%>
      <!--header end-->
      <!-- heading-banner-start -->
        <div class="heading-banner">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 col-xs-12">
                        <div class="breadcrumb">
                            <a title="Return to Home" href="public_user/index.jsp">
                                <i class="icon-home"></i>
                            </a>
                            <span class="navigation-page">
                                <span class="navigation-pipe">></span>
                               		购物车
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- heading-banner-end -->
        
       
        <!-- 购物车 -->
        <div class="mycart">
        <div class="container">
            <div class="row">
                        <!-- 标题 -->
                    <h3>购物车</h3>
                        <div class="shoppingcart-title">
                            <span class="col-xs-1 col-md-1 col-sm-1"> <input
                                type="checkbox" name="allselect" onchange="allSelect()" />
                            </span> 
                            <span class="col-xs-2 col-md-2 col-sm-2">图片</span> <span
                                class="col-xs-2 col-md-2 col-sm-2">商品信息</span> <span
                                class="col-xs-2 col-md-2 col-sm-2">单价</span> <span
                                class="col-xs-2 col-md-2 col-sm-2">数量</span> <span
                                class="col-xs-2 col-md-2 col-sm-2">金额</span> <span
                                class="col-xs-1 col-md-1 col-sm-1">操作</span>
                        </div>
                        </div>
                        <div id="myCart">
                        <div class="row">
                    <!-- 1 -->
                        <div class="shoppingcart-one">
                            <div class="col-xs-1 col-md-1 col-sm-1 product-select">
                                <input type="checkbox" name="select" value="1"
                                    onchange="changeCheckbox()" />
                            </div>
                            <div class="col-xs-2 col-md-2 col-sm-2 product-img">
                                <img src="shiLeYuan.jpg" />
                            </div>
                            <div class="col-xs-2 col-md-2 col-sm-2 product-title">
                                <h4>河流</h4>
                                <h6>憨爸</h6>
                                <h5>清华大学出版社</h5>
                            </div>
                            <div class="col-xs-2 col-md-2 col-sm-2 product-price price1">
                                ¥50</div>
                            <div class="col-xs-2 col-md-2 col-sm-2 product-num">
                                <input type="number" name="productNum1" value="1" min="1"
                                    onchange="changePrice(this.name)" />
                            </div>
                            <div class="col-xs-2 col-md-2 col-sm-2 product-price price2">
                                ¥50</div>
                            <div class="col-xs-1 col-md-1 col-sm-1 product-remove">
                                <button class="button button-pill button-tiny">
                                    <i class="fa fa-times" aria-hidden="true"></i>
                                </button>
                            </div>
                        </div>

                         </div>
                   
                        <div class="row">
                          <div class="shoppingcart-one ">
                      <!-- 2 -->
                            <div class="col-xs-1 col-md-1 col-sm-1 product-out">
                                <input type="checkbox" name="select" value="2"
                                    onchange="changeCheckbox()" style="display: none;"/>
                                <span>该商品已下架</span>
                            </div>
                            <div class="col-xs-2 col-md-2 col-sm-2 product-img">
                                <img src="shiLeYuan.jpg" />
                            </div>
                            <div class="col-xs-2 col-md-2 col-sm-2 product-title">
                                <h4>河流</h4>
                                <h6>憨爸</h6>
                                <h5>清华大学出版社</h5>
                            </div>
                            <div class="col-xs-2 col-md-2 col-sm-2 product-price price1">
                                ¥50</div>
                            <div class="col-xs-2 col-md-2 col-sm-2 product-num">
                                <input type="number" name="productNum2" value="1" min="1"
                                    onchange="changePrice(this.name)" readonly="readonly"/>
                            </div>
                            <div class="col-xs-2 col-md-2 col-sm-2 product-price price2">
                                ¥50</div>
                            <div class="col-xs-1 col-md-1 col-sm-1 product-remove">
                                <button class="button button-pill button-tiny">
                                    <i class="fa fa-times" aria-hidden="true"></i>
                                </button>
                            </div>
                        </div>

                    </div>
                    </div>
                    <div class="row">
                    <!-- 总价 -->
                    <div class="shoppingcart-money">
                        <div class="col-xs-9 col-md-9 col-sm-9">&nbsp;</div> 
                        <div class="col-xs-2 col-md-2 col-sm-2 total-price">¥0</div> 
                        <div class="col-xs-1 col-md-1 col-sm-1">&nbsp;</div>
                    </div>
                
            </div>
                <!-- 操作 -->
                 <div class="row">
                  <div class="shoppingcart-operation">
                 <div class="col-xs-4 col-md-9 col-sm-4">&nbsp;</div> 
                 <div class="col-xs-8 col-md-3 col-sm-8">
               		  <button class="button button-pill button-tiny delallbtn" onclick="delCartList()">清空购物车</button>
                        <button class="button button-pill button-tiny paybtn" onclick="checkInfo()">结算</button>
                        
                    </div>
                    </div>
                    </div>
        </div>
    
        </div>
        
        
        
         <!--footer start-->
   <%@include file="footer.jsp"%>
   <!--footer end-->
   
   	<!-- 模态框（Modal） -->
	<div class="modal fade" id="userInfo" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">核对信息</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" role="form" id="check_form">
						<div class="form-group">
							<label for="firstname" class="col-sm-2 control-label">总金额(￥)</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="all_money" id="all_money"
									readonly placeholder="总金额" /> 
							</div>
						</div>
						<div class="form-group">
							<label for="lastname" class="col-sm-2 control-label">实付金额(￥)</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="pay_money"
									readonly name="pay_money" placeholder="实付金额">
							</div>
						</div>
						<div class="form-group">
							<label for="lastname" class="col-sm-2 control-label">电话</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="utel"
									name="utel" placeholder="输入您的联系方式" value="${user.utel}">
							</div>
						</div>
						
							<div class="form-group">
							<label for="lastname" class="col-sm-2 control-label">地址</label>
							<div class="col-sm-10">
							<c:choose>
                            <c:when test="${user.uaddress ==null }">
								<input type="text" class="form-control" id="uaddress"
									name="uaddress" placeholder="输入您的联系地址" >
							</c:when>
							<c:otherwise>
							<input type="text" class="form-control" id="uaddress"
									name="uaddress" placeholder="输入您的联系地址" value="${user.uaddress}" >
							</c:otherwise>
							</c:choose>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn " data-dismiss="modal">关闭
					</button>
					<button type="button" class="btn btn-primary" data-dismiss="modal"
						id="pay_btn" onclick="payment()">确定</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
   <!-- <script src="css/user_css/js/vendor/jquery-1.12.0.min.js"></script> -->
        <!-- bootstrap js -->
        <script src="css/user_css/js/bootstrap.min.js"></script>
        <!-- owl.carousel js -->
        <script src="css/user_css/js/owl.carousel.min.js"></script>
        <!-- meanmenu js -->
        <script src="css/user_css/js/jquery.meanmenu.js"></script>
        <!-- countdown js -->
        <script src="css/user_css/js/countdown.js"></script>
        <!-- jquery.nivo.slider.pack js -->
        <script src="css/user_css/js/jquery.nivo.slider.pack.js"></script>
        <!-- jquery-ui.min.js -->
        <script src="css/user_css/js/jquery-ui.min.js"></script>
        <!-- wow js -->
        <script src="css/user_css/js/wow.min.js"></script>
        <!-- plugins js -->
        <script src="css/user_css/js/plugins.js"></script>
        <!-- main js -->
        <script src="css/user_css/js/main.js"></script>
          <script src="jquery/jquery-2.2.4.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="bootstrap/bootstrapvalidator/js/bootstrapValidator.min.js"></script>
        <script type="text/javascript">
        //用户折扣信息
        var disCount=1.00;
        $(document).ready(function(){ 
        	getMyCarts();
			totalPrice();
			getdiscount();
			//更新头部购物车
			getMyCarInfo();
			  $("#check_form").bootstrapValidator({
			      message : 'This value is not valid',
			      feedbackIcons : {/*输入框不同状态，显示图片的样式*/
			        valid : 'glyphicon glyphicon-ok',
			        invalid : 'glyphicon glyphicon-remove',
			        validating : 'glyphicon glyphicon-refresh'
			      },
			      fields : {/*验证*/
			        uaddress: {
			        	  message : 'The address is not valid',
		                validators: {
		                	 notEmpty: {/*非空提示*/
			                     message: '地址不能为空'
			                 },
		                	 stringLength: {/*长度提示*/
			                     min:6,
			                     max: 30,
			                     message: '地址长度必须在6到30位之间'
			                 }
		                }
		            }, 
		         utel: {
		             message: 'The username is not valid',
		             validators: {
		                 notEmpty: {/*非空提示*/
		                     message: '电话不能为空'
		                 },
		                 regexp: {
		                 	regexp: /^1[34578]\d{9}$/,
		                 	message: '存在不符合的字符' 
		                 },
		                 stringLength: {/*长度提示*/
		                     min: 11,
		                     max: 11,
		                     message: '电话长度必须是11位'
		                 }
		                 
		             }
		         }
			      }
			    });
        });
        //获取用户折扣信息
 	   function getdiscount(){
 			$.ajax({
 				url : 'userMsg/getUserDiscountInfo.do',
 				type : 'POST',
 				async : "true",
 				data : {
 				},
 				traditional: true,//这里设置为true
 				dataType : 'json',
 				success : function(data) {
 					disCount=data.discount;
 				}
 			});
 			
 	    } 
        	 //获得我的购物车
            function getMyCarts(){
             	$.ajax({
         			url : "shopCartMsg/getMyCartList.do", // 请求地址
         			type : "POST", // 请求类型
         			async : "true", // 是否异步方式
         			data : {},
         			dataType : "json", // 返回数据格式
         			success : function(data) {
         				if (data.res>0) {
         					var myCart=$("#myCart");
         					myCart.empty();
         					
         					$.each(data.list,function(index, element) {
         					var divs="<div class='row'>"
                               +"<div class='shoppingcart-one'>"
                                   +" <div class='col-xs-1 col-md-1 col-sm-1 product-select'>"
                                        +"<input type='checkbox' name='select'  value='"+element.shopcart.sid+"' "
                                        +"onchange='changeCheckbox()' />"
                                        +"<input type='hidden' value='"+element.bid+"'/>"
                                   +" </div>"
                                    +"<div class='col-xs-2 col-md-2 col-sm-2 product-img'>"
                                       +" <a href='javascript:detail("+element.bid+")'>"
                                    	+"<img src='"+element.bpicurl+"' /></a>"
                                       +" </div>"
                                    +"<div class='col-xs-2 col-md-2 col-sm-2 product-title'>"
                                        +"<h5>"+element.bname+"</h5>"
                                        +"<h6>"+element.bauthor+"</h6>"
                                       +" <h5>"+element.bpress+"</h5>"
                                       +" </div>"
                                    +"<div class='col-xs-2 col-md-2 col-sm-2 product-price price1'>"
                                       +" ¥<span>"+element.bprice+"</span></div>"
                                   +" <div class='col-xs-2 col-md-2 col-sm-2 product-num'>"
                                        +"<input type='number' name='productNum"+index+"' value='"+element.shopcart.snum+"' min='1'"
                                           +" onchange='changePrice(this.name)' />"
                                        +" </div>"
                                    +"<div class='col-xs-2 col-md-2 col-sm-2 product-price price2'>"
                                       +" ¥"+(element.bprice*element.shopcart.snum)+"</div>"
                                    +"<div class='col-xs-1 col-md-1 col-sm-1 product-remove'>"
                                       +" <button class='button button-pill button-tiny delbtn' onclick='delOneCart(this)'>"
                                          +"  <i class='fa fa-times' aria-hidden='true'></i>"
                                        +"</button>"
                                        +" </div>"
                                        +" </div>"
                                        +" </div>";
                               $("#myCart").append(divs);
         						});
         	            
         				}
         			}
         		});
        }
        
        	 
		//删除单个购物车
		function delOneCart(obj){
			//获得购物车id
			var divs = $(obj).parent().parent().find('div');
			var sid = divs.eq(0).find('input').eq(0).val();
			if (!confirm("确认要删除该商品吗?")) {
				return;
			}
			$.ajax({
				url : 'shopCartMsg/delOneCart.do',
				type : 'POST',
				async : "true",
				data : {
					"sid":sid
				},
				dataType : 'json',
				success : function(data) {
					if(data.res==0){
						alert("你还没登录！");
					}
					else if (data.res>0) {
						alert("删除成功！");
						$(".total-price").text("￥" + 0);
						getMyCarts();
						//更新头部购物车
						getMyCarInfo();
					}else{
						alert("删除失败！");
					}
				}
			});
			
		}
		//删除选中的多条购物车
		function delCartList(){
			if (!confirm("确认要删除选中的商品吗?")) {
				return;
			}
			//获得购物车id
			var chk_value = [];//定义一个数组
			 //利用将name等于ids的多选按钮得到
	        $("input[name='select']:checked").each(function() {
	        //将选中额数据存到数组里
	        chk_value.push($(this).val());
	        });
	        if (chk_value.length == 0) {
	            alert("你还没有选择任何内容！");
	            return;
	        }
			$.ajax({
				url : 'shopCartMsg/delCartList.do',
				type : 'POST',
				async : "true",
				data : {
					"s_list":chk_value
				},
				traditional: true,//这里设置为true
				dataType : 'json',
				success : function(data) {
					if(data.res==0){
						alert("你还没登录！");
					}
					else if (data.res>0) {
						alert("删除成功！");
						$(".total-price").text("￥" + 0);
						getMyCarts();
						//更新头部购物车
						getMyCarInfo();
					}else{
						alert("删除失败！");
					}
				}
			});
			
		}
		//核对信息
		function checkInfo(){
			//获得购物车id
			var chk_value = [];//定义一个数组
			var allMoney=0;
			 //利用将name等于ids的多选按钮得到
	        $("input[name='select']:checked").each(function() {
	        //将选中额数据存到数组里
	        chk_value.push($(this).val());
	        //书的价钱
			var now_price= $(this).parent().parent().find('div').eq(3).find('span').text();
			//购买量
			var pay_number=$(this).parent().parent().find('div').eq(4).find('input').val();
			allMoney=allMoney+now_price*pay_number;
	        });
	        if (chk_value.length == 0) {
	            alert("你还没有选择任何内容！");
	            return;
	        }
	       
	        $('#all_money').val(allMoney);
	        $('#pay_money').val(disCount*allMoney);
			$('#userInfo').modal('show');
		}
		//结算
		function payment(){
			var bv = $("#check_form").data('bootstrapValidator');
			bv.validate();
			if (!bv.isValid()) {
				return;
			}
			if (!confirm("确认要购买吗?")) {
				return;
			}
			var sid_str=[];//购物车id
			var bid_str = [];//定义书的id数组
			var now_price_str = [];//定义书的现价数组
			var pay_price_str = [];//定义书的成交价数组
			var pay_number_str = [];//定义书的数量数组
			 $("input[name='select']:checked").each(function() {
				 sid_str.push($(this).val());
				 //书的id
				 var bid= $(this).next().val();
				 bid_str.push(bid);
				 //书的价钱
				var now_price= $(this).parent().parent().find('div').eq(3).find('span').text();
				now_price_str.push(now_price);
				//书的成交价
				var pay_price=now_price*disCount;
				pay_price_str.push(pay_price);
				//购买量
				var pay_number=$(this).parent().parent().find('div').eq(4).find('input').val();
				pay_number_str.push(pay_number);
			      
			        });
			//用户联系方式
			var utel=$("#utel").val();
			var uaddress=$("#uaddress").val();
			//实付金额
			var payMoney= $('#pay_money').val();
			$.ajax({
				url : 'orderMsg/paymentCart.do',
				type : 'POST',
				async : "true",
				data : {
					"sid_list":sid_str,
					"bid_list":bid_str,
					"now_price_list":now_price_str,
					"pay_price_list":pay_price_str,
					"pay_number_list":pay_number_str,
					"utel":utel,
					"uaddress":uaddress,
					"payMoney":payMoney
				},
				traditional: true,//这里设置为true
				dataType : 'json',
				success : function(data) {
				 if (data.res>0) {
						alert("购买成功");
						getMyCarts();
						//同时更新所有商品总金额
						$(".total-price").text("￥" + 0);
						//更新头部购物车
						getMyCarInfo();
					}else{
						alert("购买失败！");
					}
				}
			});
			
		}
		
		
		
		
        	/* 监听商品数量框，数量变化，商品总价、所有商品总价跟着变化 */
    		function changePrice(name) {
    			//判断,商品数量不可小于1
    			if ($("input[name='" + name + "']").val() < 1) {
    				alert("商品数量不可小于1");
    				$("input[name='" + name + "']").val(1);
    			}
    			// 获取单价
    			var bbb = $("input[name='" + name + "']").parent().prev().text()
    					.trim().substring(1);
    			var ccc = $("input[name='" + name + "']").parent().next();
    			ccc.text("¥" + $("input[name='" + name + "']").val()
    					* parseFloat(bbb));
    			// 如果变更商品数量框，则让该商品复选框为选中状态
    			$("input[name='" + name + "']").parent().siblings().first()
    					.children().prop("checked", true);
    			// 由于改变了商品复选框状态，所以调用changeCheckbox()，其里面包含更新所有商品金额
    			changeCheckbox();
    		}
    		/* 监听商品选择复选框 */
    		function changeCheckbox() {
    			var t = 0;
    			var f = 0;
    			//如果所有商品的复选框为选中状态，则全选框为选中状态；反之，全选框为非选中状态
    			$("input[name='select']").each(function() {
    				if ($(this).prop("checked")) {
    					if (f > 0)
    						return false;
    					t++;
    				} else {
    					if (t > 0)
    						return false;
    					f++;
    				}
    			});
    			if (t == $("input[name='select']").length) {
    				$("input[name='allselect']").prop("checked", true);
    			} else {
    				$("input[name='allselect']").prop("checked", false);
    			}
    			//同时更新所有商品总金额
    			totalPrice();
    		}
    		/* 监听全选复选框，选中则所有商品选中，非选中则全部非选中 */
    		function allSelect() {
    			var flag = $("input[name='allselect']").prop("checked");
    			$("input[name='select']").prop("checked", flag);
    			totalPrice();
    		}
    		/* 计算被选择的商品总价 */
    		function totalPrice() {
    			var num = 0.0;
    			$("input[name='select']").each(
    					function() {
    						if ($(this).prop("checked")) {
    							var p = $(this).parent().siblings().last().prev()
    									.text().trim().substring(1);
    							num += parseFloat(p);
    						}
    					});
    			$(".total-price").text("￥" + num);
    		}
    	  
    	  
    	   
        </script>
        
        
  
</body>
</html>